<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 先引入react,再引入react-dom,因为react是核心库，react-dom是扩展库 -->
<!-- 引入以后全局多了一个REACT和ReactDOM对象 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="example"></div>
<!-- 此处一定要写babel，不写就是默认js -->
<script type="text/babel">
// MyComponent 继承 React.Component, 构造器到底写不写，如果想写点其他属性就要写构造器
class MyComponent extends React.Component {
  // render()方法放到了--类MyComponent的原型对象上—__proto__， 供实例使用
  // render中的this是MyComponent的实例对象  props,refs,state被称为组件的三大属性(继续react组件)
  // 在控制台输入MyComponent.prototype输出类的原型对象
  render(){
    return <h2>我是用类定义的组件</h2>
  }
}
// 一写组件标签，react就会帮我new这个实例
/* 
  执行了ReactDom.render(<Demo/>...之后，发生了什么)
  1.react解析组件标签，找到了MyComponent组件。
  2.发现组件时使用类定义的，随后new出了该类的实例，并通过该实例调用原型上的render方法，将render返回的虚拟dom转为真实的dom，呈现到页面中。
*/
// 简单组件和复杂组件的区别就是有没有状态
/* 
  状态影响行为
  状态驱动页面
*/
ReactDOM.render(
	<MyComponent/>,
	document.getElementById('example')
);
</script>

</body>
</html>